---
layout: styleguide
title: Headers
category: UI components
permalink: /headers/
lead: 'Headers help users identify where they are and provide a quick, organized way to reach the main sections of a website. Our headers include branding to identify the site and horizontal navigation.'
maturity: alpha
---

<h3 class="usa-heading heading-margin-alt">Accessibility</h3>
<ul class="usa-content-list">
  <li>Include skip navigation links to allow users with screen readers to bypass long navigation lists. Make sure you include an id at the beginning of your main content and that it matches the skipnav link. Find more information here: <a href="http://webaim.org/techniques/skipnav/">http://webaim.org/techniques/skipnav/</a></li>
  <li>Include Tab focus for all top-level navigation navigation items — this will allow keyboard-reliant users to easily navigate interactive items.</li>
  <li>Ensure your horizontal navigation is keyboard compatible; test to make sure users can use Tab to navigate and Space (or Enter) to open pages.</li>
  <li>Avoid using hover to expand dropdown lists. Hover is difficult for some users and won't work on touch screens. Drop downs should expand on click or with keyboard navigation.</li>
  <li>We use semantic header and nav elements with <code>role="banner"</code> and <code>role="navigation"</code> respectively. <code>role="banner"</code> is your masthead.</li>
  <li>You can use multiple nav elements for groups of navigation links, but you should only use one <code>role="navigation"</code> for the main nav of a page.</li>
  <li>Use lists for your nav links — this enables screen readers to decipher header contents.</li>
  <li>If you’re using a logo that’s an image rather than text, make sure you include alternative text for screen readers.</li>
  <li>If you’re using a logo that’s text, use an <code>em</code>, not an <code>h1</code>, unless it’s the homepage. Find more information here: <a href="http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/">http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/</a></li>
</ul>

<h3 class="usa-heading">Usability</h3>
<h4>When to use</h4>
<ul class="usa-content-list">
  <li>We recommend that all federal government sites include the “official government site” banner and a logo or site name.</li>
  <li>Most sites will require some form of navigation to help users find the information they’re looking for. While a horizontal navigation bar is just one option for navigation design, it is one of the most visible and familiar ways of helping users navigate a site.</li>
</ul>

<h4>Guidance</h4>
<ul class="usa-content-list">
  <li>List all important website sections as links in the horizontal navigation bar.</li>
  <li>For large websites, use drop-down menus to help users preview lower-level content. If lower-level sections are closely related and users will need to quickly jump between them, consider using a side navigation instead of — or in addition to — a drop down.</li>
  <li>Use descriptive, recognizable link labels. Don’t label links with jargon or unfamiliar terms.</li>
  <li>Left-justify link labels to make them more easily scannable.</li>
  <li>Present links in priority order: Higher-demand links should appear farther to the left, and lower-demand links should appear farther to the right.</li>
  <li>Don’t model your navigation after your agency’s org structure. Instead, structure it according to the tasks and information your users most frequently need to access.</li>
  <li>Show users where they are within the menu options by highlighting the current section.</li>
  <li>Conduct research with your users and base decisions about your site’s information architecture and navigation structure on your findings. Continue researching to confirm that updates meet your users’ needs.</li>
</ul>

<h4>For further reading</h4>
<ul>
  <li><a href="https://www.nngroup.com/articles/menu-design/">https://www.nngroup.com/articles/menu-design/</a></li>
  <li><a href="https://www.usertesting.com/blog/2015/03/19/site-navigation-tree-testing/">https://www.usertesting.com/blog/2015/03/19/site-navigation-tree-testing/</a></li>
</ul>

<h2 class="usa-heading" id="basic">Basic header</h2>
<div class="preview">
  <a class="media_link" href="{{ site.baseurl }}/headers/basic/">
    <img src="{{ site.baseurl }}/assets/img/headers/header-basic.png" alt="Basic header">
  </a>
  <a class="usa-button" href="{{ site.baseurl }}/headers/basic/">Demo basic header</a>
</div>
{% include code/accordion.html component="header-basic" %}
<div class="usa-accordion-bordered">
  <button class="usa-button-unstyled usa-accordion-button"
    aria-expanded="true" aria-controls="docs-header-basic">
    Documentation
  </button>
  <div id="docs-header-basic" class="usa-accordion-content">
    <h4 class="usa-heading">What it does</h4>
    <p>The basic header is great if you have a modest number of sections in your main navigation. You can customize it (depending on your site structure) and use it with:</p>
    <ul>
      <li>A text or image logo</li>
      <li>With or without dropdown menus</li>
      <li>With or without a search bar</li>
      <li>With or without call-to-action buttons in place of the search bar</li>
    </ul>
    <h4 class="usa-heading">Why use it</h4>
    <p>Use the basic header if you have few enough sections in your main navigation to fit comfortably next to your logo; this will depend on the length of your text and whether you include a search bar. You may also use it if you’d like to include the full search bar in your header, or if each main section listed in the horizontal navigation has six or fewer subsections that you’d like to include in a dropdown menu.</p>
    <h4 class="usa-heading">When not to use it</h4>
    <p>Consider using the extended header if you have more sections in your horizontal navigation than will fit comfortably next to your logo, or if you have complex sections that require the use of a mega menu.</p>
  </div>
</div>

<h2 class="usa-heading" id="basic-mega-menu">Basic header with mega menu</h2>
<div class="preview">
  <a class="media_link" href="{{ site.baseurl }}/headers/basic-mega/">
    <img src="{{ site.baseurl }}/assets/img/headers/header-basic-mega-menu.png" alt="Basic header with mega menu">
  </a>
  <a class="usa-button" href="{{ site.baseurl }}/headers/basic-mega/">Demo basic header with mega menu</a>
</div>
{% include code/accordion.html component="header-basic-mega" %}
<div class="usa-accordion-bordered">
  <button class="usa-button-unstyled usa-accordion-button"
    aria-expanded="true" aria-controls="docs-header-basic-mega">
    Documentation
  </button>
  <div id="docs-header-basic-mega" class="usa-accordion-content">
    <h4 class="usa-heading">What it does</h4>
    <p>The basic header with mega menu is similar to our basic header — it simply allows for the inclusion of more links in the dropdown menus. You can customize it (depending on your site structure) and use it with:</p>
    <ul>
      <li>A text or image logo</li>
      <li>With or without a search bar</li>
      <li>With or without call-to-action buttons in place of the search bar</li>
    </ul>
    <h4 class="usa-heading">Why use it</h4>
    <p>Use the basic header with mega menu if you’d like to include more than six links in any of your dropdown menus, and if you have few enough main sections to allow your horizontal navigation to fit comfortably in the basic header.</p>
    <h4 class="usa-heading">When not to use it</h4>
    <p>Consider using a basic dropdown rather than a mega menu unless you need to link to a very large number of sub pages.</p>
  </div>
</div>

<h2 class="usa-heading" id="extended">Extended header</h2>
<div class="preview">
  <a class="media_link" href="{{ site.baseurl }}/headers/extended/">
    <img src="{{ site.baseurl }}/assets/img/headers/header-extended.png" alt="Extended header">
  </a>
  <a class="usa-button" href="{{ site.baseurl }}/headers/extended/">Demo extended header</a>
</div>
{% include code/accordion.html component="header-extended" %}
<div class="usa-accordion-bordered">
  <button class="usa-button-unstyled usa-accordion-button"
    aria-expanded="true" aria-controls="docs-header-extended">
    Documentation
  </button>
  <div id="docs-header-extended" class="usa-accordion-content">
    <h4 class="usa-heading">What it does</h4>
    <p>The extended header allows for inclusion of more sections in the horizontal navigation. You can customize the header (depending on your site structure) and use it:</p>
    <ul>
      <li>With a text or image logo</li>
      <li>With or without dropdown menus</li>
      <li>With or without the expandable search bar</li>
      <li>With or without call-to-action buttons in place of the secondary links featured in your horizontal navigation</li>
    </ul>
    <h4 class="usa-heading">Why use it</h4>
    <p>Use the extended header if you have too many sections in your horizontal navigation to fit comfortably in the basic header format. You may also consider using it if you’d like to include secondary links or specific calls to action in addition to the main content navigation — for example Log in and Sign up links.</p>
    <h4 class="usa-heading">When not to use it</h4>
    <p>Consider using the basic header if you have less information — the basic header takes up less space.</p>
  </div>
</div>

<h2 class="usa-heading" id="extended-mega-menu">Extended header with mega menu</h2>
<div class="preview">
  <a class="media_link" href="{{ site.baseurl }}/headers/extended-mega/">
    <img src="{{ site.baseurl }}/assets/img/headers/header-extended-mega-menu.png" alt="Extended header with mega menu">
  </a>
  <a class="usa-button" href="{{ site.baseurl }}/headers/extended-mega/">Demo extended header with mega menu</a>
</div>
{% include code/accordion.html component="header-extended-mega" %}
<div class="usa-accordion-bordered">
  <button class="usa-button-unstyled usa-accordion-button"
    aria-expanded="true" aria-controls="docs-header-extended-mega">
    Documentation
  </button>
  <div id="docs-header-extended-mega" class="usa-accordion-content">
    <h4 class="usa-heading">What it does</h4>
    <p>Like the extended header, the extended header with mega menu allows for inclusion of more sections in your horizontal navigation; it also allows you to include more links in any of your dropdowns. You can customize the header (depending on your site structure) and use it:</p>
    <ul>
      <li>With a text or image logo</li>
      <li>With or without the expandable search bar</li>
      <li>With or without call-to-action buttons in place of the secondary links in the horizontal navigation</li>
    </ul>
    <h4 class="usa-heading">Why use it</h4>
    <p>Use an extended header with mega menu if you have too many sections in your horizontal navigation to fit comfortably in the basic header format. It’s also useful if you’d like to include secondary links or specific calls to action in addition to the main content navigation — for example Log in and Sign up links — or if you’d like to include more than six links in any of your dropdowns.</p>
    <h4 class="usa-heading">When not to use it</h4>
    <P>Consider using a basic dropdown rather than a mega menu unless you need to link to a very large number of sub pages.</P>
  </div>
</div>
